<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>fastface</title>
    <link rel="shortcut icon" href="favicon.ico">
    <script src="js/load.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="flexrow">
            <div class="layui-panel list-container">
                <div class="list-search-container">
                    <button class="layui-btn layui-btn-sm" onclick="HandleAdd()"><i class="layui-icon layui-icon-add-1 layui-font-12"></i>注册人脸
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="HandleQuery()"><i class="layui-icon layui-icon-upload-circle layui-font-12"></i>查找人脸
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="HandleAnalysis()"><i class="layui-icon layui-icon-picture layui-font-12"></i>活体检测
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="HandleReset()"><i class="layui-icon layui-icon-tips layui-font-12"></i>重置索引
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="HandleCheck()"><i class="layui-icon layui-icon-ok layui-font-12"></i>检测人脸
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="HandleCompare()"><i class="layui-icon layui-icon-picture layui-font-12"></i>比对人脸
                    </button>
                    <div class="list-search-item">
                        <span>人员ID：</span>
                        <input id="userID" autocomplete="off" class="layui-input">
                    </div>
                    <div class="list-search-item">
                        <span>人员名称：</span>
                        <input id="userName" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn layui-btn-sm" style="margin-left:5px" onclick="BindTableData()"><i class="layui-icon layui-icon-search layui-font-12"></i>搜索
                    </button>
                </div>
                <table class="layui-table" lay-data="{id: 'datagrid'}" lay-filter="datagrid">
                    <thead>
                        <tr>
                            <th lay-data="{field:'userID'}">人员ID</th>
                            <th lay-data="{field:'userName', width:300}">人员名称</th>
                            <th lay-data="{field:'registDate', width:200}">注册时间</th>
                            <th lay-data="{field:'updateDate', width:200}">更新时间</th>
                            <th lay-data="{fixed: 'right', width:400, align:'center', toolbar: '#op'}">操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div>
        <input type="file" name="file" id="file" style="display:none" onchange="FileChange()" />
        <input type="file" name="search" id="search" style="display:none" onchange="SearchFileChange()" />
        <input type="file" name="check" id="check" style="display:none" onchange="CheckFileChange()" />
    </div>
</body>
<script type="text/html" id="op">
    <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="HandleEdit"><i class="layui-icon layui-icon-edit layui-font-12"></i>修改名称
    </button>
    <button class="layui-btn layui-btn-sm" lay-event="HandleEditFace"><i class="layui-icon layui-icon-refresh layui-font-12"></i>更新人脸
    </button>
    <button class="layui-btn layui-btn-sm" lay-event="HandleDetail"><i class="layui-icon layui-icon-user layui-font-12"></i>查看人脸
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="HandleDelete"><i class="layui-icon layui-icon-delete layui-font-12"></i>删除
    </button>
</script>
<script>
    var userID = "";
    $(function() {
        BindTableData();

    })

    function BindTableData() {
        var param = {
            userName: $("#userName").val(),
            userID: $("#userID").val()
        }
        BindTable("datagrid", "face/regist/list", param);
    }


    function HandleAdd() {
        OpenDialog('注册人脸', 'pages/face_add.html', 600, 500, function() {
            BindTableData();
        })
    }

    function HandleQuery() {
        document.getElementById("search").click();
    }

    function SearchFileChange() {
        var file = document.getElementById("search").files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            var base64Image = reader.result;
            var param = {
                base64Image: base64Image
            }
            StartLoading("匹配中");
            HttpPost(JSON.stringify(param), 'face/regist/query', function(result) {
                CloseLoading();
                if (result.code == 0) {
                    var message = "【用户ID】：" + result.data.userID + "【用户名称】：" + result.data.userName;
                    OpenSuccess(message, function() {
                        OpenDialog('查看人脸', 'pages/face_detail.html?userID=' + result.data.userID, 300, 380)
                    });
                } else {
                    OpenFail(result.msg);
                }
            })
        }
    }

    function HandleReset() {
        OpenConfirm('确认重置？', function() {
            var param = {

            }
            StartLoading("重置中");
            HttpPost(JSON.stringify(param), 'face/regist/resetFaceDBIndex', function(result) {
                CloseLoading();
                if (result.code == 0) {
                    OpenSuccessMessage("重置成功")
                } else {
                    OpenFail(result.msg);
                }
            })
        })
    }

    function HandleEdit(RowData) {
        OpenDialog('修改名称', 'pages/face_edit.html?userID=' + RowData.userID, 500, 300, function() {
            BindTableData();
        })
    }

    function HandleEditFace(RowData) {
        userID = RowData.userID;
        document.getElementById("file").click();
    }

    function FileChange() {
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            var base64Image = reader.result;
            var param = {
                userID: userID,
                base64Image: base64Image
            }
            HttpPost(JSON.stringify(param), 'face/regist/update', function(result) {
                if (result.code == 0) {
                    OpenSuccessMessage("更新成功")
                    BindTableData();
                } else {
                    OpenFail(result.msg);
                }
            })
        }
    }

    function HandleDetail(RowData) {
        OpenDialog('查看人脸', 'pages/face_detail.html?userID=' + RowData.userID, 300, 380)
    }

    function HandleDelete(RowData) {
        OpenConfirm('确认删除？', function() {
            var param = {
                userID: RowData.userID
            }
            HttpPost(JSON.stringify(param), 'face/regist/delete', function(result) {
                if (result.code == 0) {
                    OpenSuccessMessage("删除成功")
                    BindTableData();
                } else {
                    OpenFail(result.msg);
                }
            })
        })
    }

    function HandleCheck() {
        document.getElementById("check").click();
    }

    function CheckFileChange() {
        var file = document.getElementById("check").files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
            var base64Image = reader.result;
            var param = {
                base64Image: base64Image
            }
            StartLoading("检测中");
            HttpPost(JSON.stringify(param), 'face/regist/check', function(result) {
                CloseLoading();
                if (result.code == 0) {
                    OpenSuccessMessage(result.msg)
                    BindTableData();
                } else {
                    OpenFail(result.msg);
                }
            })
        }
    }

    function HandleCompare() {
        OpenDialog('比对人脸', 'pages/face_compare.html', 800, 450)
    }

    function HandleAnalysis() {
        window.open(GetRootPath() + "analysis/index.html")
    }
</script>

</html>